<template>
  <d2-container>
    <template slot="header">
      <!-- 选择器部门 -->
      <el-select
        v-model="value"
        clearable
        placeholder="请选择部门"
        class="selector"
      >
        <el-option
          v-for="item in allDepartment"
          :key="item.name"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <!-- 选择器指标 -->
      <el-select
        v-model="value1"
        clearable
        placeholder="请选择考核状态"
        class="selector"
      >
        <el-option v-for="item in allstatus" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>

      <!-- 日期选择 -->
      <div class="block1">
        <span class="demonstration">选择日期</span>
        <el-date-picker v-model="date" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <el-button type="primary" @click="search" class="botton_souch">搜索 </el-button>
      <el-button type="primary" @click="reset" class="botton_souch">重置</el-button>
    </template>
    <!-- 按钮 -->
    <template>
      <!-- Form -->
      <el-button
        type="text"
        style="background-color: #0099cc; color: white"
        @click="dialogFormVisibleOpen"
        >新增考核
      </el-button>

      <el-dialog title="新增考核" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="所属部门" :label-width="formLabelWidth">
            <el-select
              v-model="form.value1"
              @change="selectDepartment"
              placeholder="请选择考核部门"
            >
              <el-option
                v-for="(item, index) in form.region1"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="被考核" :label-width="formLabelWidth">
            <el-select v-model="form.value2" placeholder="请选择被考核">
              <el-option
                v-for="(item, index) in form.region2"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考核模板" :label-width="formLabelWidth">
            <el-select
              v-model="form.value3"
              @change="selectDepartment3"
              placeholder="请选择被考核"
            >
              <el-option
                v-for="(item, index) in form.region3"
                :key="index"
                :label="item.templateName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考核人" :label-width="formLabelWidth">
            <el-select v-model="form.value4" placeholder="请选择考核人">
              <el-option
                :key="form.region4.name"
                :label="form.region4.name"
                :value="form.region4.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建人" :label-width="formLabelWidth">
            <el-select v-model="form.value5" placeholder="请选择创建人">
              <el-option
                v-for="(item, index) in form.region5"
                :key="index"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisibleClose"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <!-- table -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column
          prop="appraisalTemplate.department"
          label="部门"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="appraisalTemplate.templateName"
          label="考核名称"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="appraisalTemplate.type"
          label="考核类型"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="name" label="被考核人" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" width="200">
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column
          prop="assessorName"
          label="考核人"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.assessorName }}</template>
        </el-table-column>
        <el-table-column prop="score" label="考核得分" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.score }}</template>
        </el-table-column>
        <el-table-column prop="status" label="考核状态" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.status }}</template>
        </el-table-column>
        <el-table-column label="操作" width="210">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit1(scope.$index, scope.row)"
              >状态</el-button
            >
            <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button> -->
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="examineListFormInline.currentPage"
          :page-size.sync="examineListFormInline.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="examineListFormInline.total"
        >
        </el-pagination>
      </div>
    </template>
  </d2-container>
</template>

<style>
.block {
  float: right;
}

.block1 {
  float: left;
}

.inputBox {
  width: 25%;
}

.botton_souch {
  margin-left: 5%;
}
</style>

// 组件js
<script>
export default {
  data () {
    return {
      loading: false,
      // 搜索框
      input: '',
      date: '',
      // 选择器部门
      allDepartment: [],
      value: '',
      // 选择考核状态
      allstatus: ['待考核', '待审核', '已完成'],
      value1: '',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      value3: '',
      // 部门列表对象
      examineList: {
        id: 0
      },

      // table
      tableData: [],
      multipleSelection: [],
      CompanyDepartment: [],
      DepartmentTemplate: [],
      examineListFormInline: {
        // 分页当前页
        currentPage: 1,
        limit: 10,
        total: 0,
        departmentId: ''
      },
      // 按条件搜索时传入的对象
      examineListFormInlineSearch: {
        // 分页当前页
        currentPage: 1,
        limit: 10,
        total: 0,
        departmentId: '',
        status: '',
        date: ''
      },
      dialogFormVisible: false,
      form: {
        name: '',
        region1: [],
        value1: null,
        region2: [],
        value2: '',
        region3: [],
        value3: '',
        region4: [],
        value4: '',
        region5: [],
        value5: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      dept: {
        id: ''
      },
      addExamineList: {
        departmentId: '',
        examinee: '',
        templateId: '',
        assessor: '',
        creator: '',
        status: '待考核'
      }
    }
  },
  created () {
    this.getdata(this.formInline)
  },
  // 分页
  methods: {
    // 分页插件事件当前页发生改变时
    handleCurrentChange (currentPage) {
      this.examineListFormInline.currentPage = currentPage
      this.getdata()
    },
    // 每页条数改变时事件
    handleSizeChange (limit) {
      this.examineListFormInline.limit = limit
      this.getdata()
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 查询部门考核列表信息方法
    getdata () {
      this.$request({
        url: 'examineList/findExamineListFormInline',
        method: 'post',
        data: this.examineListFormInline
      })
        .then((res) => {
          this.tableData = res.list
          this.examineListFormInline.total = res.total
        })
        .catch((err) => {
          console.log(err)
        })
      this.$request({
        url: 'dept/findAllDept',
        method: 'post',
        data: null
      }).then(res => {
        this.allDepartment = res
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除部门考核列表
    handleDelete (index, row) {
      this.examineList.id = row.id
      this.$request({
        url: 'examineList/deleteExamineList',
        method: 'post',
        data: this.examineList
      })
        .then((res) => {
          this.getdata()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 跳转评分界面
    handleEdit1 (index, row) {
      this.$router.push({
        name: 'score',
        query: {
          eid: row.id
        }
      })
    },
    // 查找所有部门
    dialogFormVisibleOpen () {
      this.dialogFormVisible = true
      this.$request({
        url: 'dept/findAllDept',
        method: 'post',
        data: null
      })
        .then((res) => {
          this.form.region1 = res
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 查找部门事件
    selectDepartment () {
      this.form.value2 = ''
      this.$request({
        url: 'user/findAllByDept',
        method: 'post',
        data: this.form.value1
      })
        .then((res) => {
          this.form.region2 = res
        })
        .catch((err) => {
          console.log(err)
        })
      this.$request({
        url: 'AppraisalTemplate/findAllTemplate',
        method: 'post',
        data: {
          id: this.form.value1
        }
      })
        .then((res) => {
          this.form.region3 = res
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 选中被考核人之后
    selectDepartment3 () {
      this.dept.id = this.form.value1
      this.$request({
        url: 'user/findOne',
        method: 'post',
        data: this.form.value1
      })
        .then((res) => {
          this.form.region4 = res
        })
        .catch((err) => {
          console.log(err)
        })
      this.form.region5 = this.form.region2
    },
    // 弹出界面确认按钮后的操作
    dialogFormVisibleClose () {
      this.value = ''
      this.value1 = ''
      this.date = ''
      this.dialogFormVisible = false
      this.addExamineList.departmentId = this.form.value1
      this.addExamineList.examinee = this.form.value2
      this.addExamineList.templateId = this.form.value3
      this.addExamineList.assessor = this.form.value4
      this.addExamineList.creator = this.form.value5
      this.$request({
        url: 'examineList/insertExamineList',
        method: 'post',
        data: this.addExamineList
      })
        .then((res) => {
          this.form.region1 = res
          this.getdata()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 弹出框取消按钮后清理操作
    dialogFormVisibleCancel () {
      this.dialogFormVisible = false
    },
    // 重置按钮
    reset () {
      this.value = ''
      this.value1 = ''
      this.date = ''
      this.getdata()
    },
    search () {
      this.examineListFormInlineSearch.departmentId = this.value
      this.examineListFormInlineSearch.status = this.value1
      // this.examineListFormInlineSearch.date = this.date
      this.$request({
        url: 'examineList/findExamineListFormInline',
        method: 'post',
        data: this.examineListFormInlineSearch
      })
        .then((res) => {
          this.tableData = res.list
          this.examineListFormInline.total = res.total
        })
        .catch((err) => {
          console.log(err)
        })
      this.$request({
        url: 'dept/findAllDept',
        method: 'post',
        data: null
      }).then(res => {
        this.allDepartment = res
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
